<template>
  <div class="home-container">
    <header-banner height="786" :position="0"></header-banner>
    <!-- 公司简介 -->
    <simple-info></simple-info>
    <header-banner height="470" :position="1"></header-banner>
    <!-- <div class="row-3">
      <img class="img" src="@/assets/images/home/banner2.png" alt="" />
      <div class="content">
        <div class="common-w-box" style="width: 1340px">
          <div class="f1">开放心态与积极交流</div>
          <div class="f2">
            <span>是建立长期良性合作的基石</span>
          </div>
          <div class="hr"></div>
          <div class="f3">
            佰茵云，一个自主研发的生物信息分析平管，致力于为生品科学服务。本平台集数据下载、分析和结果可视化于一体，汇集了多。佰茵云，一个自主研发的生物信息分析平管，致力于为生品科学服务。本平台集数据下载、分析和结果可视化于一体，汇集了多
          </div>
          <div class="more">
            <a href="#">查看详情</a>
          </div>
        </div>
      </div>
    </div> -->
    <div class="row-4">
      <div class="common-w-box">
        <div class="tt-box">
          <div class="tt">
            <div class="t1">Academic achievement</div>
            <div class="t2">学术成果</div>
          </div>
          <div class="tabs">
            <span
              :class="tabActive == '1' ? 'on' : ''"
              @click="tabsChange('1')"
            >
              源动研究院成果
            </span>
            <span
              :class="tabActive == '2' ? 'on' : ''"
              @click="tabsChange('2')"
            >
              佰因云用户成果
            </span>
          </div>
        </div>
        <el-row :gutter="24" class="list-c" v-if="tabActive == '1'">
          <el-col :span="12" v-for="i in 6" :key="i">
            <div class="item">
              <div class="tt">
                <div class="f1">article</div>
                <div class="f2">0 引文</div>
              </div>
              <div class="title ellipsis">
                Advanced Platelet-Rich Fibrin Extract Treatment Promotes the
                Proliferati and Differe
              </div>
              <div class="des ellipsis">
                Lu, G.-M., Jiang, L.-Y., Huang, D.-L., ...Meng, F.-H., Li,
                H.-M.Current Stem Cell Research and Therapy此链接已禁用。, 2023,
                18(1), 页 127–142
              </div>
              <div class="detail">
                <span class="a-link">查看摘要</span>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="more">
              <el-button type="primary" link plain size="small">
                查看更多
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="list-c" v-if="tabActive == '2'">
          <el-col :span="12" v-for="i in 6" :key="i">
            <div class="item">
              <div class="tt">
                <div class="f1">article</div>
                <div class="f2">0 引文</div>
              </div>
              <div class="title ellipsis">
                2 Advanced Platelet-Rich Fibrin Extract Treatment Promotes the
                Proliferati and Differe
              </div>
              <div class="des ellipsis">
                Lu, G.-M., Jiang, L.-Y., Huang, D.-L., ...Meng, F.-H., Li,
                H.-M.Current Stem Cell Research and Therapy此链接已禁用。, 2023,
                18(1), 页 127–142
              </div>
              <div class="detail">
                <span class="a-link">查看摘要</span>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="more">
              <el-button type="primary" link plain size="small">
                查看更多
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <business-card></business-card>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// import BannerCom from './components/BannerCom.vue'
import SimpleInfo from './components/SimpleInfo.vue'
import BusinessCard from './components/BusinessCard.vue'
import HeaderBanner from './components/HeaderBanner.vue'

const tabActive = ref('1')
const tabsChange = (value) => {
  tabActive.value = value
}
</script>
<style lang="scss" scoped>
.home-container {
  .row-3 {
    position: relative;
    background: #fff;

    .img {
      width: 100%;
    }

    .content {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;

      .f1 {
        font-size: 20px;
        line-height: 26px;
        color: #fff;
      }

      .f2 {
        margin-top: 10px;

        span {
          display: inline-block;
          padding-bottom: 16px;
          font-size: 32px;
          line-height: 40px;
          color: #3aace3;
          border-bottom: 1px solid $borderCol;
        }
      }

      .f3 {
        width: 730px;
        margin-top: 24px;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: rgb(255 255 255 / 90%);
      }

      .more {
        margin-top: 38px;
        font-size: 14px;
        text-align: center;

        a {
          display: inline-block;
          padding: 0 20px;
          line-height: 32px;
          color: var(--el-color-primary);
          border: 1px solid var(--el-color-primary);
          border-radius: 32px;

          &:hover {
            background: #fff;
            border: 1px solid $borderCol;
          }
        }
      }
    }
  }

  .row-4 {
    padding: 94px 0 24px;
    background: #f5f7fa;

    .tt-box {
      display: flex;
      justify-content: space-between;

      .tt {
        .t1 {
          font-size: 24px;
          font-weight: 600;
          line-height: 28px;
          color: #000;
        }

        .t2 {
          margin-top: 4px;
          font-size: 20px;
          font-weight: 600;
          line-height: 23px;
          color: #3aace3;
        }
      }

      .tabs {
        span {
          display: inline-block;
          margin: 0 14px;
          font-size: 14px;
          line-height: 32px;
          color: #949494;
          cursor: pointer;
          border-bottom: 2px solid #f5f7fa;

          &.on {
            color: var(--el-color-primary);
            border-bottom: 2px solid var(--el-color-primary);
          }
        }
      }
    }

    .list-c {
      .item {
        padding: 16px;
        margin-top: 24px;
        background: #fff;
        border: 1px solid $borderCol;

        .tt {
          display: flex;
          justify-content: space-between;
          margin-bottom: 18px;
          font-size: 12px;

          .f1 {
            font-size: 14px;
            font-weight: bold;
            color: #666;
          }

          .f2 {
            font-size: 12px;
            color: #333;
          }
        }

        .ellipsis {
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .title {
          font-size: 16px;
          font-weight: 600;
          line-height: 20px;
          color: #333;
        }

        .des {
          margin-top: 8px;
          font-size: 12px;
          font-weight: 500;
          line-height: 16px;
          color: rgb(136 136 136 / 90%);
        }

        .detail {
          margin-top: 18px;
          font-size: 12px;
          font-weight: 400;
          line-height: 14px;
          color: #3aace3;
        }
      }
    }

    .more {
      margin-top: 34px;
      text-align: center;

      .el-button--primary {
        padding: 6px 20px;
        border: 1px solid var(--el-color-primary);
        border-radius: 4px;
      }
    }
  }
}
</style>
../../components/BannerCom.vue
